<template>
  <div>
    <table
      width="800"
      style="text-align: center; margin: 0 auto; border-collapse: collapse"
      border="1"
    >
      <caption>
        水果店
      </caption>
      <tr>
        <th>苹果 {{ price }}&yen;/ kg, 折扣&lt; {{ dis * 10 }}折 &gt;</th>
      </tr>
      <tr>
        <td>
          请输入您要购买的公斤数&#12288;
          <input
            style="outline-style: none"
            type="number"
            v-model="count"
            placeholder="kg"
          />
        </td>
      </tr>
      <tr>
        <td>
          <!-- 静态页面6个变量使用后,绑定点击事件 -->
          <button @click="btn">结账买单^^</button>
        </td>
      </tr>
      <tr>
        <td>
          结账单:
          <span>总价: {{ allPrice }}&yen;元</span>&#12288;
          <span>折后价: {{ disPrice }}&yen;元</span>&#12288;
          <span>节省了: {{ savePrice }}&yen;元</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10, //苹果单价
      dis: 0.8, //折扣
      count: 0, //购买公斤数
      allPrice: 0, //总价
      disPrice: 0, //折后价
      savePrice: 0, //节省价
    };
  },
  methods: {
    btn(){
      //把 count 保存的数量 和 单价和折扣等计算
      this.allPrice = this.price * this.count  //单价 * 数量
      this.disPrice = this.allPrice * this.dis //总价 * 折扣
      this.savePrice = this.allPrice - this.disPrice // 总价 - 折后价
    }
  }
};
</script>

<style>
</style>